import './swiper-bundle.js';
var swiper = new Swiper('.swiper-container', {
    autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
        //设置当点击后 依旧保持自动播放
    },
    // 问题：当设置淡出时，无法选中里面的img
    effect: 'fade',
    spaceBetween: 30,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});
for (let i = 0; i < swiper.pagination.bullets.length; i++) {
    swiper.pagination.bullets[i].onmouseover = function () {
        this.click();
    };
}

import $ from './library/jquery.js'
$(function () {
    // 获取登录的用户名
    if (sessionStorage.getItem('username')) {
        $('.header .topnav p.fl em span').html(sessionStorage.getItem('username'));
    }


    let topnav = $('.page-topnav');
    //头部导航 侧边导航
    $('.side-nav>a').on('click', function () {
        let id = $(this).attr('data-title');
        let top = $('.' + id).offset().top;

        $('html').animate({
            scrollTop: top
        }, 800);
    })

    $(window).on('mousewheel', function () {
        let top = $(document).scrollTop();
        let _index = Math.round((top - 500) / 600);

        for (let i = 1; i <= 3; i++) {
            $('.side-nav>a').removeClass('color' + i);
        }
        $('.side-nav>a').eq(_index).addClass('color' + _index);
        // $('.side-nav>a').eq(_index).trigger('hover');
        //设置顶部导航
        if (top > 800) {
            topnav.css('height', '50px');
            $('.side-nav').css('transform', 'scale(1)');
        } else {
            topnav.css('height', '0px');
            $('.side-nav').css('transform', 'scale(0)');
        }

    });

});


// 页面渲染
let tab3 = $('.main .tab3 .tab1-content .TC-middle');

$.ajax({
    type: 'get',
    url: '../../interface/getItems.php',
    dataType: 'json'
}).then((res) => {
    let template = '';
    res.forEach((elm, i) => {
        let picture = JSON.parse(elm.picture);
        template += ` <a href="./detail.html?item=${elm.id}" class="grid one-grid-price">
            <div class="tc-item">
                <img src="../${picture[0].src}" alt="">
                <div class="goods-name">${elm.title}</div>
                <div class="goods-pirce">￥${elm.price}</div>
            </div>
        </a>`;
    });
    tab3.html(template);

}).catch(xhr => {
    console.log(xhr.status);
});


